<template>
    <router-view v-slot="{ Component }">
        <el-scrollbar>
            <transition name="fade">
                <component :is="Component" v-if="flag"/>
            </transition>
        </el-scrollbar>
    </router-view>
</template>
<script lang="ts" setup>
import { useSettingStore } from '@/store/modules/setting';
import useCategoryStore from '@/store/modules/category';
import { nextTick, ref, watch } from 'vue';
let flag=ref(true);
const settingStore = useSettingStore();
const categoryStore = useCategoryStore();
watch(()=>settingStore.refresh, () => {
    // 刷新页面
    flag.value = !flag.value;
    categoryStore.clearAll_list();
    nextTick(() => {
        flag.value = true;
    })
})
</script>
<style lang="less" scoped>
.fade-enter-from{
    opacity: 0;
}
.fade-enter-active{
    transition: all 0.8s;
}
.fade-enter-to{
    opacity: 1;
}
</style>